<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    @@ include("../../header.jsp"){} $$
    <!-- jqgrid-->
    <link href="/static/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td {
            vertical-align: middle !important;
        }
    </style>
</head>
<body>
<div class="content-search">
    <div style="padding:15px;">
        <form id="search" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">实验室</label>
                    <div class="layui-input-inline" style="width:120px;">
                        <select id="s-aid" name="area" lay-filter="area">
                            <option value=""></option>
                            @@ for(a in areas){ $$
                            <option value="${a.id}">${a.name}</option>
                            @@ } $$
                        </select>
                    </div>
                </div>
                <div class="layui-inline" id="d-room" style="display: none">
                    <label class="layui-form-label">房间</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <input type="text" id="room" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" onclick="search()" iconText="&#xe615;">筛选</button>
                </div>
                <div class="layui-inline">
                    <btl:auth type="button" perm="biz:domain:edit" iconText="&#xe654;" onclick="return add();"
                              text="添加配置"/>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 内容主体区域 -->
<div style="padding: 2px;">
    <div class="jqGrid_wrapper">
        <table id="table"></table>
        <div id="pager"></div>
    </div>
</div>
</div>
<script src="/static/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="/static/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="/static/jqgrid/frozen.js?v=1.0.1"></script>
<script src="/static/jqgrid/myjqGrid.js"></script>
<script>

    var can_room = false;
    var area;
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(area)', function (data) {
            area = data.value;
            can_room = !(data.value == '');
            if (can_room) {
                $('#d-room').show();
            } else {
                $('#d-room').hide();
            }
        });
    });

    var colNames = ["ID", "实验室", "房间", "技术人员", "操作"];
    var colModel = [{
        name: "id",
        index: "id",
        width: 50,
        hidden: true,
        align: "left"
    }, {
        name: "area",
        index: "area",
        sortable: false,
        editable: false,
        width: 100,
        align: "center"
    }, {
        name: "room",
        index: "room",
        sortable: false,
        editable: false,
        width: 80,
        align: "center"
    }, {
        name: "staffs",
        index: "staffs",
        sortable: false,
        editable: false,
        width: 150,
        align: "center"
    }, {
        name: "action",
        index: "action",
        width: 150,
        title: false,
        editable: true,
        align: "center",
        formatter: function (cellvalue, options, rowdata) {
            var html = '' +
                '<btl:auth type="button" perm="biz:domain:edit" extClass="btn-edit" iconText="&#xe642;" dataId="' + rowdata.id + '" text="编辑配置" />' +
                '<btl:auth type="button" perm="biz:domain:delete" extClass="btn-del layui-bg-red" iconText="&#xe640;" dataId="' + rowdata.id + '" text="删除配置" />';
            return html;
        }
    }];

    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "/pc/biz/domain/list.json",
            isSubGrid: false,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel
        })
    });

    function search() {
        var room = $("#room").val();
        var data = {"areaId": area};
        if(can_room){
            data['room'] = room;
        }else{
            $("#room").val('');
        }
        myJqGrid.reloadGrid(data);
        return false;
    }

    function add() {
        layer.open({
            title: '添加配置',
            type: 2,
            area: ['500px', '450px'],
            content: '/pc/biz/domain/edit'
        });
        return false;
    }

    $(function () {

        $(document).on("click", ".btn-edit", function (e) {
            layer.open({
                title: '编辑配置',
                type: 2,
                area: ['500px', '350px'],
                content: '/pc/biz/domain/edit?id=' + $(this).data("id")
            });
        });

        $(document).on("click", ".btn-del", function (e) {
            var id = $(this).data("id");
            layer.confirm('确定删除该配置吗？', {
                icon: 3,
                btn: ['确定', '取消'] //按钮
            }, function () { //确定
                var params = {"id": id};
                console.log(id);
                $.post("/pc/biz/domain/delete", params, function (data) {
                    if (data.status == 200) {
                        layer.alert(data.msg, {
                            icon: 1,
                            skin: 'layer-ext-moon'
                        }, function () {
                            search();
                            layer.closeAll();
                        });
                    } else {
                        layer.alert(data.msg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                });
            }, function () { //取消
            });
        });
    });

</script>
</body>
</html>